import { useEffect, useState } from 'react'
import style from './index.module.css'
import { InfiniteScroll, List } from 'antd-mobile'
import request from '../../api/request'
import { Dropdown } from "antd-mobile";
import HospitalLevel from '../HospitalLevel/Index'
import Cityslice from "../../compoents/Cityslice/Index";
function Index() {
    type HospitalItem = {
      socoimage: string
      sococity: string
      socolv: string
      nosocomium: string
      [key: string]: unknown
    }
    type SearchResponse = { code: number; data: { soco: HospitalItem[] } }
    const [hospital,setHospital] = useState<HospitalItem[]>([])
    const [pageCode,setPageCode] = useState(1)
    const pageSize = 10
    const [hasMore, setHasMore] = useState(true)
    const [deptTitle, setDeptTitle] = useState<string>("全国");
    const [levelTitle, setLevelTitle] = useState<string>("医院等级");
    const [dropdownActiveKey, setDropdownActiveKey] = useState<string | null>(null);

    const getHospital = async () => {
        const res: SearchResponse = await request.get('/api/search',{
            params:{
                pageCode,
                pageSize
            }
        })
        console.log('医院信息列表',res);
        if(res.code === 20000){
            setHospital([...hospital,...res.data.soco])
            setPageCode(pageCode+1)
        }
        if(res.data.soco.length === 0){
            setHasMore(false)
        }
    }

    // 仅初始化加载一次
    // eslint-disable-next-line react-hooks/exhaustive-deps
    useEffect(()=>{ getHospital() },[])
  return (
    <div>
      <List>
        <Dropdown activeKey={dropdownActiveKey} onChange={setDropdownActiveKey}>

          <Dropdown.Item key="sorter" title={deptTitle}>
           <Cityslice onSelect={(c)=>{ setDeptTitle(c); setDropdownActiveKey(null); }} />
          </Dropdown.Item>

          <Dropdown.Item key="level" title={levelTitle}>
            <HospitalLevel onSelect={(lv)=>{ setLevelTitle(lv); setDropdownActiveKey(null); }} />
          </Dropdown.Item>
        </Dropdown>

        {hospital.length > 0 && hospital.map((item,index)=>(
            <div key={index} className={style.socoBox}>
            <img src={item.socoimage} alt="" />

            <div className={style.textright}>
              <p className={style.hosp}>{item.sococity}</p>
              <p className={style.hosps}>
                <span>{item.socolv}</span>
                <span>{item.nosocomium}</span>
              </p>
            </div>
          </div>
        ))}
          <InfiniteScroll loadMore={getHospital} hasMore={hasMore} />
      </List>
         


    </div>
  )
}

export default Index
